<template>
	<view class="main">
		
	<view class="content">
		<view class="list-item " @click="openActivation(item,index)" :class="[item.status==1?'u-disabled':'']" v-for="(item,index) in list" :key='item.activation_code_id'>
			<view class="txt1">
				激活码（{{item.status==1?'已使用':'未使用'}}）
			</view>
			<view class="flex">
				<view class="txt2">
					{{item.code}}
				</view>
				<view class="txt3" v-if="item.status==0" @click.stop="copy(item.code)">
					复制
				</view>
			</view>
			<view class="txt4">
				{{item.create_time|formatDate}}
			</view>
		</view>
		<view class="h200">
			
		</view>
		<view class="btn-bottom" @click="buyshow">
			购买激活码
		</view>
			<u-popup v-model="show" mode="center" border-radius="14" closeable>
				<view class="card-c">
					<view class="txt5">
						购买激活码
					</view>
					<view class="">
						<view class="txt6">
							购买数量
						</view>
						<u-input v-model="num" type="digit"  :border="true"   />
						<view class="txt7">
							支付：{{num?num*par_value:0}}USDT
						</view>
					</view>
					<view class="">
						<view class="txt6">
							交易密码
						</view>
						<u-input v-model="paw" type="password" :border="true"  :password="true"/>
					</view>
					<view class="btn-bottoms" @click="buyCode">
						确认
					</view>
				</view>
			</u-popup>
			<u-popup v-model="isActivation" mode="center" border-radius="14" closeable>
				<view class="card-c">
					<view class="txt5">
						激活
					</view>
					<view class="">
						<view class="txt6">
							激活码
						</view>
						<u-input v-model="code" :border="true"   />
					</view>
					<view class="">
						<view class="txt6">
							交易密码
						</view>
						<u-input v-model="paw" type="password" :border="true"  :password="true"/>
					</view>
					<view class="btn-bottoms" @click="activation">
						激活
					</view>
				</view>
			</u-popup>
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ac:false,
				page:1,
				list:[],
				isActivation:false,
				show:false,
				num:'',
				paw:'',
				par_value:0,//单价
				code:'',//激活码
				index:'',
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getlist(this.page)
		},
		onReachBottom() {

		},
		onLoad(e){
			if(e.par_value){
				this.par_value = e.par_value
			}
		},
		onShow() {
			this.getlist(this.page)
		},
		methods: {
			//打开激活弹窗
			openActivation(e,index){
				console.log(e.code)
				if(e.status!=1){
					this.code = e.code
					this.index = index
					this.isActivation = true
				}
			},
			//点击激活
			activation(){
				this.$http({
					url:this.$api.activation,
					method:'POST',
					hideLoading:false,
					data:{
						code:this.code,
						safety_code:this.paw
					},
					success:res=>{
						console.log('激活接口返回---------',res)
						if(res.code==201){
							uni.showToast({
							    title:res.msg,
							    duration: 1000,
								icon:'none'
							});
							this.isActivation = false
							this.list[this.index].status = 1
							this.code = ''
							this.paw = ''
						}
					},complete:e=>{
						console.log('返回-----------',e)
						uni.hideLoading();
					}
				})
			},
			//购买激活码
			buyCode(){
				this.$http({
					url:this.$api.buyCode,
					method:'POST',
					hideLoading:false,
					data:{
						num:this.num,
						safety_code:this.paw
					},
					success:res=>{
						console.log('激活码列表接口返回----------',res)
						if(res.code==200){
							uni.showToast({
							    title:res.msg,
							    duration: 1000,
								icon:'none'
							});
							this.show = false
							this.num = ''
							this.paw = ''
							this.page = 1
							this.getlist(this.page)
						}
					},complete:e=>{
						console.log('返回-----------',e)
						uni.hideLoading();
					}
				})
			},
			//复制
			copy(e){
				uni.setClipboardData({
				    data: e,
				    success: function () {
				        console.log('success');
				    }
				});
			},
			buyshow(){
				this.show=true
			},
			// 获取列表
			getlist(e){
				this.$http({
					url:this.$api.getCodeList,
					method:'GET',
					hideLoading:true,
					data:{
						
						now_page:e
					},
					success:res=>{
						console.log('激活码列表接口返回----------',res)
						
						if(this.page == 1){
							this.list = []
						}
						if(res.data.list.length>0){
							this.list = this.list.concat(res.data.list)
							this.page+=1
							this.getlist(this.page)
							
						}
					},complete:e=>{
						console.log('返回-----------',e)
						uni.hideLoading();
					}
				})
			},
			
		},
		filters: {
			
			//格式化日期
			formatDate(e){
				let date = new Date(e*1000)
				console.log(date)
				let Y = date.getFullYear()
				let M = date.getMonth()+1
				let D = date.getDate()
				let h = date.getHours()
				let m = date.getMinutes()
				let s = date.getSeconds()
				if(M<10){
					M="0"+M
				}
				if(D<10){
					D="0"+D
				}
				if(h<10){
					h="0"+h
				}
				if(m<10){
					m="0"+m
				}
				if(s<10){
					s="0"+s
				}
				return `${Y}-${M}-${D} ${h}:${m}:${s}`
				
			}
		}
	}
</script>

<style scoped>
	page{
		background: #F8F8F8;
	}
	.main{
		background: #F8F8F8;
		min-height: 100vh;
	}
	.h200{
		height: 200rpx;
	}
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.list-item{
	border-radius: 20rpx;
	background: #fff;
	padding: 24rpx 30rpx;
	width: 694rpx;
	height: 184rpx;
	margin: 14rpx auto;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.flex{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.txt2{
	font-size: 32rpx;
	font-weight: 600;
	color: #222222;
	line-height: 44rpx;
}
.txt3{
	width: 100rpx;
	height: 44rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #2F73FD;
	line-height: 44rpx;	
	background: #F5F6F7;
	border-radius: 23px;
	text-align: center;
}
.txt4{
	font-size: 22rpx;
	font-weight: 400;
	color: #999999;
	line-height: 32rpx;}
	.u-disabled{		
background: #E7E7E7;
	}
	.btn-bottom{
		width: 694rpx;
		height: 80rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166,196,255,1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		color: #fff;
		font-size: 32rpx;
		margin-top: 50rpx;
		position: fixed;
		bottom: 50rpx;
	}
	.card-c{
		background: #FFFFFF;
		width: 672rpx;
		height: 700rpx;
		border-radius: 20rpx;
		position: relative;
		padding: 56rpx ;
	}
	.txt5{
		text-align: center;
		font-size:32rpx ;		
		font-weight: 600;
		color: #222222;
		line-height: 44rpx;
	}
	.txt6{
	font-size: 26rpx;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;	
	margin: 26rpx 0;
	}
	.txt7{
		font-size: 26rpx;
		font-weight: 400;
		color: #666666;
		line-height: 36rpx;
		text-align: right;
		margin-top: 18rpx;
	}
	.btn-bottoms{
		width: 360rpx;
		height: 80rpx;
		background: #2F73FD;
		box-shadow: 0px 4px 8px 0px rgba(166,196,255,1);
		border-radius: 40rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 50rpx auto;
		color: #fff;
		font-size: 32rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>
